<template>
	<view class="recycle-pop">
		<view class="box">
			<text class="name">回收总额</text>
			<view class="price flex align-center justify-center">
				<text class="unit"></text>{{value.totoalPrice}}
			</view>
			<text class="des" @click="$emit('toDetail')">查看明细 ></text>
		</view>
		<!-- <image  src="../../../../static/image/recycle-box.png" mode="widthFix"></image> -->
		<view class="content">
			<view class="items">
				<view class="item">
					<text>回收商品</text>
					<text>{{value.count}}件</text>
				</view>
				<view class="item">
					<text>消费金额</text>
					<view class="flex align-center">
						<text class="unit"></text>
						<text>{{value.calcPrice}}</text>
					</view>
				</view>
			</view>
			<view class="btns">
				<view class="btn btn1" @click="closePop">
					<text>我再想想</text>
				</view>
				<view class="btn btn2" @click="$emit('comfirmRecycle')">
					<text>确认回收</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Object,
				required: true
			}
		},
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			goDetail() {
				this.$util.redirectTo('/pages/magic-box/draw-result/recycleDetail', {
					id: 3
				});
			},
			closePop() {
				this.$emit('closePop');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recycle-pop {
		width: 100%;
		height: 499rpx;
		border-radius: 33rpx 33rpx 0px 0px;
		background: #E9EBF9;
		padding-top: 57rpx;
		.unit {
			width: 34rpx;
			height: 41rpx;
			background: url("~@/static/image/coin-icon.png");
			background-size: 100% 100%;
		}
		.box {
			position: absolute;
			z-index: 10;
			width: 352rpx;
			height: 325rpx;
			top: -163rpx;
			left: 50%;
			transform: translateX(-50%);
			background: url(../../../static/image/recycle-box.png);
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			text-align: center;

			.name {
				font-size: 25rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #232323;
				margin-top: 74rpx;
			}

			.price {
				font-size: 39rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #232323;
			}

			

			.des {
				font-size: 19rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(35, 35, 35, 0.6);
			}
		}

		.content {
			background: url(../../../static/image/recycle-bg.png);
			background-size: 100% 100%;
			width: 100%;
			height: 442rpx;

			.items {
				display: flex;
				margin-top: 122rpx;

				&>.item {
					width: 50%;
					display: flex;
					align-items: center;

					&:nth-of-type(1) {
						border-right: 1px solid #BCC1E3;
					}

					flex-direction: column;

					&>text:nth-of-type(1) {
						font-size: 25rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #232323;

					}

					&>text:nth-of-type(2) {
						font-size: 31rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #232323;
					}
				}
			}

			.btns {
				display: flex;
				justify-content: space-around;
				margin-top: 116rpx;

				.btn {
					width: 322rpx;
					height: 83rpx;
					font-size: 31rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					transform: rotateZ(5deg) skew(-5deg, -5deg);
					margin: 0 7rpx;

					&>text {
						transform: rotateZ(-5deg) skew(5deg, 5deg);
					}

					&.btn1 {
						background: linear-gradient(270deg, #17A4FF 0%, #2644F5 100%);
						box-shadow: 4px 4px 10rpx rgba(23, 164, 255, 0.5);

					}

					&.btn2 {
						background: linear-gradient(270deg, #FF4056 0%, #FF2EB3 100%);
						box-shadow: 4px 4px 4rpx rgba(255, 46, 179, 0.5);
					}
				}

			}
		}
	}
</style>
